<template>
    <div class="base__widget">
        <div style="height: 500px;">
            <div style="height: 300px;border: 1px solid tomato;margin-bottom: 20px;"></div>
            <button class="btn_wrap" ref="buttonRef" aria-describedby="tooltip" @mouseenter="handlerOpen"
                @mouseleave="handlerClose">
                My button
            </button>
            <div v-show="isShow" ref="tooltipRef" class="tooltip" role="tooltip">
                My tooltip with more content
                <div ref="arrowRef" class="arrow"></div>
            </div>
            <div style="height: 300px;border: 1px solid tomato;margin-top: 20px;"></div>
        </div>

        <!-- <button @click="handlerOpen">
            打开提示
        </button>
        <button @click="handlerClose">
            关闭提示
        </button> -->
    </div>
</template>

<script setup>
import { computePosition, flip, shift, offset, autoUpdate, autoPlacement, arrow } from "@floating-ui/vue";
const buttonRef = ref(null);
const tooltipRef = ref(null);
const isShow = ref(false)
const arrowRef = ref(null)

function handlerOpen(params) {
    isShow.value = true
    updatePosition()
}

function handlerClose(params) {
    // tooltipRef.value.hide()
}

function updatePosition() {
    computePosition(buttonRef.value, tooltipRef.value, {
        // placement: 'right',
        middleware: [
            flip(), 
            shift({
                padding: 10
            }), 
            offset(10), 
            autoPlacement({
                // alignment: true,
                // autoPlacement: false,
                // crossAxis: true,
                allowedPlacements:['top', 'bottom']
            }),
            arrow({
                element: arrowRef.value,
                padding: 5
            })
        ]
    }).then(({ x, y, placement, middlewareData }) => {
        Object.assign(tooltipRef.value.style, {
            left: `${x}px`,
            top: `${y}px`,
        });
        // 访问中间件数据
        // const {} = middlewareData.flip
        // const {} = middlewareData.offset
        // const {} = middlewareData.shift
        const { x: arrowX, y: arrowY } = middlewareData.arrow
        console.log('更新位置', placement);
        const staticSide = {
            top: 'bottom',
            right: 'left',
            bottom: 'top',
            left: 'right',
        }[placement.split('-')[0]];
        Object.assign(arrowRef.value, {
            left: arrowX != null ? `${arrowX}px` : '',
            top: arrowY != null ? `${arrowY}px` : '',
            right: '',
            bottom: '',
            [staticSide]: '-4px',
        });
    });
}

nextTick(() => {
    if (tooltipRef.value) {
        const cleanup = autoUpdate(
            buttonRef.value, tooltipRef.value,
            updatePosition,
        );
    }
})

onMounted(() => {
    // document.body.append(tooltipRef.value);
})
</script>

<style lang="scss" scoped>
.base__widget {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    border: 1px solid blue;
    overflow-y: auto;
}

.tooltip {
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    background: #222;
    color: white;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    font-size: 90%;
}
.arrow {
  position: absolute;
  background: #222;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
</style>